<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "Database",
  inject: ["getNode"],

  data() {
    return {
      height: 128,
      width: 64,
      title: "Database",
      text: "数据库"
    };
  },
  computed: {
    nodeStyle() {
      return {
        width: this.width + "px",
        height: this.height + "px"
      };
    }
  },
  mounted() {
    const node = (this as any).getNode();
    this.width = node.getSize().width;
    this.height = node.getSize().height;
    const _text = node.getAttrs().text?.text;
    if (_text) {
      this.text = _text;
    } else {
      node.attr("text/text", this.text);
    }
    node.on("change:attrs", ({ current }: any) => {
      if (current.text) {
        this.text = current.text.text;
      }
    });

    node.on("change:size", ({ current }: any) => {
      const { width, height } = current;
      this.width = width;
      this.height = height;
    });
  }
});
</script>

<template>
  <div class="c-database" :style="nodeStyle">
    <svg
      t="1731203617357"
      class="c-database__svg"
      viewBox="0 0 1024 1024"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      p-id="1100"
    >
      <path
        d="M536.32 620.16h60.16v24.32h-60.16zM536.32 380.16h60.16v24.32h-60.16z"
        fill="#34303D"
        p-id="1101"
      ></path>
      <path
        d="M656 812.16H584.32V224h71.68v24.32H608v539.52h48v24.32z"
        fill="#34303D"
        p-id="1102"
      ></path>
      <path d="M595.84 499.84h60.16v24.32h-60.16z" fill="#34303D" p-id="1103"></path>
      <path
        d="M332.16 512c-92.8 0-168.32-32-168.32-71.68v119.68c0 39.68 75.52 72.32 168.32 72.32s168.32-32 168.32-71.68V440.32C499.84 480 424.96 512 332.16 512z"
        fill="#F6BE53"
        p-id="1104"
      ></path>
      <path
        d="M691.84 139.52h168.32v179.84h-168.32zM691.84 703.36h168.32v179.84h-168.32z"
        fill="#EA5E5A"
        p-id="1105"
      ></path>
      <path
        d="M848 332.16H704a24.32 24.32 0 0 1-23.68-23.68v-48.64H704v48h144v-48h24.32v48a24.32 24.32 0 0 1-23.68 24.32zM848 248.32H704a24.32 24.32 0 0 1-23.68-23.68V152.32A24.32 24.32 0 0 1 704 128h144a24.32 24.32 0 0 1 24.32 24.32V224a24.32 24.32 0 0 1-23.68 24.32zM704 152.32V224h144V152.32z"
        fill="#34303D"
        p-id="1106"
      ></path>
      <path
        d="M728.32 176h24.32v24.32h-24.32zM728.32 259.84h24.32v24.32h-24.32zM848 608H704a24.32 24.32 0 0 1-23.68-23.68v-48H704v48h144v-48h24.32v48a24.32 24.32 0 0 1-23.68 24.32zM848 524.16H704a24.32 24.32 0 0 1-23.68-23.68V428.16a24.32 24.32 0 0 1 23.68-24.32h144a24.32 24.32 0 0 1 24.32 24.32v71.68a24.32 24.32 0 0 1-23.68 24.32zM704 428.16v71.68h144V428.16z"
        fill="#34303D"
        p-id="1107"
      ></path>
      <path
        d="M728.32 451.84h24.32v24.32h-24.32zM728.32 536.32h24.32v24.32h-24.32zM848 896H704a24.32 24.32 0 0 1-23.68-23.68v-48H704v48h144v-48h24.32v48a24.32 24.32 0 0 1-23.68 24.32zM848 812.16H704a24.32 24.32 0 0 1-23.68-23.68v-72.32a24.32 24.32 0 0 1 24.32-23.68h144a24.32 24.32 0 0 1 24.32 24.32v72.32a24.32 24.32 0 0 1-23.68 24.32zM704 716.16v72.32h144v-72.32z"
        fill="#34303D"
        p-id="1108"
      ></path>
      <path
        d="M728.32 739.84h24.32v24.32h-24.32zM728.32 824.32h24.32v24.32h-24.32zM332.16 403.84c-102.4 0-179.84-35.84-179.84-83.84s76.8-83.84 179.84-83.84S512 272 512 320 434.56 403.84 332.16 403.84z m0-144c-92.16 0-156.16 31.36-156.16 60.16s64 60.16 156.16 60.16 156.16-32 156.16-60.16-64.64-60.16-156.16-60.16z"
        fill="#34303D"
        p-id="1109"
      ></path>
      <path
        d="M332.16 524.16c-102.4 0-179.84-35.84-179.84-83.84V320h24.32v120.32c0 28.16 64 60.16 156.16 60.16s156.16-31.36 156.16-60.16V320H512v120.32c0 47.36-77.44 83.84-179.84 83.84z"
        fill="#34303D"
        p-id="1110"
      ></path>
      <path
        d="M332.16 643.84c-102.4 0-179.84-35.84-179.84-83.84V440.32h24.32v119.68c0 28.16 64 60.16 156.16 60.16s156.16-31.36 156.16-60.16V440.32H512v119.68c0 48-77.44 83.84-179.84 83.84z"
        fill="#34303D"
        p-id="1111"
      ></path>
      <path
        d="M332.16 764.16c-102.4 0-179.84-35.84-179.84-83.84V560h24.32v120.32c0 28.16 64 60.16 156.16 60.16s156.16-31.36 156.16-60.16V560H512v120.32c0 47.36-77.44 83.84-179.84 83.84zM272 440.32h24.32v24.32h-24.32zM320 440.32h24.32v24.32H320zM368 440.32h24.32v24.32h-24.32z"
        fill="#34303D"
        p-id="1112"
      ></path>
      <path
        d="M272 560h24.32v24.32h-24.32zM320 560h24.32v24.32H320zM368 560h24.32v24.32h-24.32zM272 680.32h24.32v24.32h-24.32zM320 680.32h24.32v24.32H320zM368 680.32h24.32v24.32h-24.32z"
        fill="#34303D"
        p-id="1113"
      ></path>
    </svg>
    <div class="c-database__content">
      <div class="c-database__content__title">{{ title }}</div>
      <div class="c-database__content__text">{{ text }}</div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.c-database {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  border: 1px solid #5f95ff;
  background-color: rgba(95, 149, 255, 0.05);
  &__svg {
    max-width: 64px;
    max-height: 64px;
  }
  &__content {
    flex: 1;
    &__title {
      font-size: 16px;
      color: #0e1215;
      font-weight: 600;
    }
    &__text {
      font-size: 12px;
      color: #6c757d;
    }
  }
}
</style>
